<template>
  <div class="passwordManage">
    <el-card class="box-card">
      <div class="header">
        <el-upload
          class="upload-demo"
          :multiple="false"
          action="/api/secretCodeResource/importResource"
          accept="txt/plain"
          :auto-upload="true"
          :show-file-list="false"
          :onSuccess="handleAvatarSuccess"
        >
          <el-button size="small" type="primary">导入文件</el-button>
        </el-upload>
        <el-form
          :inline="true"
          :model="item"
          :rules="ruleItem"
          ref="ruleForm"
          class="demo-form-inline"
          style="padding-left: 15"
        >
          <el-form-item>
            <el-checkbox>资源标识:{{ item.mmzyId }}</el-checkbox>
          </el-form-item>

          <el-form-item label="来源">
            <el-input
              v-model="item.source"
              v-if="item.soucre == null"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-radio-group v-model="item.clazz">
              <el-radio label="按设备分割" value="0"></el-radio>
              <el-radio label="全军通波" value="1"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="请选择" placeholder="请选择">
            <el-select v-model="item.type">
              <el-option
                v-for="item in option"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              >
              </el-option>
              <!-- <el-option v-if="item.clazz.value == 1">
                <el-input placeholder="配选" :disabled="true"> </el-input>
              </el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="编号：" v-if="item.type == 7">
            <el-input v-model="item.type" placeholder="1"></el-input>
          </el-form-item>
          <el-form-item label="适用密码物理标识：" v-model="item.wlmark">
            <el-input placeholder="001"></el-input>
          </el-form-item>
          <el-form-item label="通用组件ID" v-model="item.componentId">
            <el-input placeholder="001"></el-input>
          </el-form-item>
          <el-form-item label="适用网系：" v-if="item.clazz.value == 1">
            <el-input v-model="item.netName" placeholder="短波"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="footer" style="width: 100%">
        <el-button type="primary" @click="addBtn" :on-change="handleSuccess"
          >添加按钮</el-button
        >
        <el-table :data="fileList" border style="width: 100%; height: 40%">
          <el-table-column
            prop=""
            label="资源标识"
            width="140px"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="name" label="来源" width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="address"
            label="类型"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="资源分发类型"
            align="center"
            width="170"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="适用网系/密码设备物理标——组件ID"
            width="380"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="是否已使用"
            align="center"
            width="145"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="导入/派生时间"
            align="center"
            width="170"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="160"
          >
            <template slot-scope="scope">
              <el-button
                class="taskInfo"
                @click="details(scope.row)"
                type="text"
                size="small"
                >编辑
              </el-button>
              <el-button
                class="taskInfo"
                type="text"
                size="small"
                @click="deleteSource(scope.row, 1)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  secretCodeResource,
  importResourceInsert,
} from "@/api/passwordResManage"; //上传的不需要使用 接口 action已配置

// action="/api/secretCodeResource/importResource"
// 关于这属性的配置 :auto-upload="true" 自动上传
// 尝试三种方法
// /api/secretCodeResource/importResource
// 后端地址/api/secretCodeResource/importResource
// 后端地址/api/secretCodeResource/importResource
export default {
  name: "passwordResManage",
  data() {
    return {
      // checked: false,
      // radio: false,
      fileList: [],
      option: [
        {
          label: "受启资源",
          value: "1",
          disabled: false,
        },
        {
          label: "无人机地空管理秘钥",
          value: "2",
          disabled: false,
        },
        {
          label: "无人机测控链秘钥",
          value: "3",
          disabled: false,
        },
        {
          label: "其他",
          value: "4",
          disabled: false,
        },
        {
          label: "初装",
          value: "5",
          disabled: false,
        },
        {
          label: "配装",
          value: "6",
          disabled: false,
        },
        {
          label: "根密钥0xxf升级软件",
          value: "7",
          disabled: true,
        },
      ],
      list: [],
      item: {
        // form对象
        mmzyId: "",
        source: "",
        clazz: "",
        type: "",
        wlmark: "",
        componentId: "",
        netName: "",
      },
      ruleItem: {
        //规则参考官网的 表单验证
        clazz: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    addBtn() {
      this.fileList.push(item);
    },
    handleAvatarSuccess(response, file, fileList) {
      console.log(response, file, fileList); // respone成功返回的值
      // let formData = new FormData();
      // fileList.forEach((element) => {
      //   formData.append("files", element.raw, element.name);
      // });
      // secretCodeResource(formData).then((res) => {
      //   console.log(res);
      //   if (res.data.retureCode == 0) {
      //     this.data = res.data.data;
      //   } else {
      //     this.$message({
      //       title: "失败",
      //       message: res.data.message,
      //       type: "warning",
      //       duration: 2000,
      //     });
      //   }
      // });
    },
    handleSuccess(file, fileList) {},
  },
};
</script>
<style scoped>
.el-button--primary {
  color: #fff;
  background-color: #3077b7;
  border-color: #3077b7;
  margin-bottom: 15px;
}
.header {
  background-color: white;
  margin-bottom: 65px;
}
el-input {
  width: 100%;
}
</style>
